<template>
  <div class="widget-graph"
    :style="{
        width: styleColor.width + 'px',
        height: styleColor.height + 'px',
        left: styleColor.left,
        top: styleColor.top,
        position: styleColor.position,
      }">
    <svg>
      <ellipse cx="50%" cy="50%" :rx="styleColor.rx" :ry="styleColor.ry"
         :fill="stylePointValue.fillColor"
        :stroke="styleColor.strokeColor" :stroke-width="styleColor.strokeWidth" pointer-events="all"></ellipse>
    </svg>
  </div>
</template>

<script>
  import { getDataByPointId } from '@/api/pointData'

  export default {
    name: "WidgetGraphCircle",
    components: {},
    props: {
      value: Object,
      ispreview: Boolean,
    },
    data() {
      return {
        options: {},
      };
    },
    computed: {
      transStyle() {
        return this.objToOne(this.options);
      },
      stylePointValue() {
        return {
          fillColor: "#fff",
        }
      },
      styleColor() {
        return {
          position: this.ispreview ? "absolute" : "static",
          color: this.transStyle.color || "#fff",
          background: this.transStyle.background,
          display: this.transStyle.hideLayer == undefined ?
            "block" :
            this.transStyle.hideLayer ?
            "none" :
            "block",
          width: this.transStyle.width,
          height: this.transStyle.height,
          left: this.transStyle.left + "px",
          top: this.transStyle.top + "px",
          right: this.transStyle.right + "px",
          strokeColor: this.transStyle.strokeColor,
          strokeWidth: this.transStyle.strokeWidth,
          rx: (this.transStyle.width || 0) / 2 - (this.transStyle.strokeWidth || 0) / 2,
          ry: (this.transStyle.height || 0) / 2 - (this.transStyle.strokeWidth || 0) / 2,
          fillColor: this.transStyle.fillColor,
        };
      },
    },
    watch: {
      value: {
        handler(val) {
          this.options = val;
          this.queryData()
        },
        deep: true,
      },
    },
    mounted() {
      this.options = this.value;
      // console.log(this.options)
      this.stylePointValue.fillColor = this.options.setup.fillColor
      this.parseData()
    },
    methods: {
      /*解析数据*/
      parseData() {
        this.queryData()
        if(this.options.data.dataType === "dynamicData" && this.ispreview) {
          setInterval(this.queryData, this.options.data.refreshTime)
        }
      },
      /*查询参数点的数据*/
      queryData() {
        if(this.options.data.stationPoint == null) {
          return; // 还未配置参数点
        }
        getDataByPointId(this.options.data.stationPoint.pointId).then(resp => {
          let pointCode = Object.keys(resp.data)[0]
          this.pointValue = resp.data[pointCode]
          if(this.options.data.pointRuleAI) {
            for (let i = 0; i < this.options.data.pointRuleAI.length; i++) {
              let rule = this.options.data.pointRuleAI[i]
              const result = eval(`${this.pointValue}${rule.operator}${rule.pointValue}`)
              if(result) {
                this.stylePointValue.fillColor = rule.color
                this.$forceUpdate()
                break;
              }
            }
          }
        })
      },
    },
  };
</script>

<style scoped lang="scss">
  .widget-graph {
    svg {
      width: 100%;
      height: 100%;

    }
  }
</style>
